<template>
<div class="qfContainer">
  <div v-if="title"> <h1> {{ title }}</h1> </div>
  <div class="hd">
    <slot name="hd"></slot>
  </div>
  <div class="main">
    <slot></slot>
  </div>
  <div class="ft">
    <slot name="ft"></slot>
  </div>
</div>
</template>

<script>
export default {
  name: 'ContainerPage',
  props: ['title'],
};
</script>

<style scoped lang="scss">
.qfContainer{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.main {
  height: 0;
  flex-grow: 1;
}

</style>
